<template>
  <div class="content">
    <div class="main">
      <video-player
        ref="VideoPlayer"
        :format-time="formatTime"
        :current-time="currentTime"
        :start-time="startTime"
        :end-time="endTime"
        :layout-type="layout"
        :list="list"
        :play.sync="playValue"
        :progress.sync="progress"
        :volume.sync="volumeValue"
        @changeCurrentTime="changeCurrentTime"
        @ended="ended"
        @timeupdate="timeupdate"
      >
        <template v-slot:buttons>
          <el-button
            @click="openComments"
            :disabled="!currentPhases || currentPhases.length <= 0"
            type="warning"
            size="mini"
            circle
          >
            签
          </el-button>
        </template>
      </video-player>
    </div>
    <!-- <comment
      title="分析意见"
      :visible.sync="isComment"
      :idx-detail="idxDetail"
      :load-analysis-form="loadAnalysisForm"
      :phases="currentPhases"
      :base64pic="base64pic"
      @submit="submitComments"
    /> -->
  </div>
</template>

<script>
// import { Component, Vue, Watch, Emit, Prop } from 'vue-property-decorator'
// import VideoPlayer from '../VideoPlayer/index.vue'
// import Comment from '../Comment.vue'
export default {
    components: {
    // VideoPlayer,
    // Comment
  },
  data(){
    return{
      form:{
        item: '',
        content: '',
        question: '',
        opinion: '',
        illegal: '',
        snapshoot: ''
      },
      base64pic: '',
      isComment: false,
      idxDetail: '',
      loadAnalysisForm: '',
      currentPhases: '',
      progressValue: this.progress
    }
  },
  props:{
    currentTime: {
      type: Number,
      default: 0
    },
    startTime: {
      type: Number,
      default: 0
    },
    endTime: {
      type: Number,
      default: 0
    },
    layout: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
        default() {
          return []
        }
    },
    play: {
      type: Boolean,
      default: false
    },
    progress: {
      type: Number,
      default: 0
    },
    volume: {
      type: Number,
      default: 100
    },
    formatTime: {
      type: Function,
      required: false
    },
    currentPhases: {
      type: Array,
      default() {
        return []
      }
    },
    phaseList: {
      type: Array,
      default() {
        return []
      }
    },
    loadAnalysisForm: {
      type: Function,
      default(params) {
        return params
      }
    },
    idxDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  mounted() {
    console.log('this.list6666----------------',this.list) 
  },
  computed: {
    // 当调用这个属性时，会执行getter函数
    progressValue: {
      get() {
         return this.progress
      },
      // 当这个属性被赋值时，会执行setter函数
      set(value) {
        this.$emit('update:progress', value)
      }
    }
  },
  methods: {
    playValue(value) {
    if (!this.isComment) {
      this.$emit('update:play', value)
    }
  },
  // progressValue(value) {
  //   this.$emit('update:progress', value)
  // },
  volumeValue(value) {
    this.$emit('update:volume', value)
  },
  changeCurrentTime(value) {
    return value
  },
  ended() {
    return true
  },
  timeupdate(time) {
    return time
  },
  openComments() {
    this.isComment = true
    this.$nextTick(async() => {
      const base64pic = await (this.$refs.VideoPlayer).getSnapshoot()
      this.base64pic = base64pic
    })
  },
  submitComments(form) {
    return form
  },
  changeMainVideo(index) {
    (this.$refs.VideoPlayer).changeMain(index)
  }
  }
}

</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}
  .main {
    height: 100%;
  }
</style>

